﻿@{
    ViewBag.Title = "功能菜单";
}
@model List<FunctionViewModel>

<script src="~/Content/bootstrap-table/bootstrap-table.min.js"></script>
<link href="~/Content/bootstrap-table/extensions/tree-table/jquery.treetable.css" rel="stylesheet" />
<script src="~/Content/bootstrap-table/extensions/tree-table/jquery.treetable.js"></script>
<link href="~/Content/bootstrap-table/extensions/tree-table/bootstrap-table-tree-table.css" rel="stylesheet" />
<script src="~/Content/bootstrap-table/extensions/tree-table/bootstrap-table-tree-table.js"></script>


<!-- Content Header (Page header) -->
<div class="content-header clearfix">
    <form class="form-inline">
        <div class="form-group">
            <label for="exampleInputName2">功能名称：</label>
            <input type="text" class="form-control" id="menu_Name" placeholder="请输功能名称" />
        </div>
        <div class="form-group">
            <label for="exampleInputEmail2">添加人：</label>
            <input type="text" class="form-control" id="userName" placeholder="请输入添加人" />
        </div>

        <button type="button" id="btn-query" onclick="searchData()" class="btn bg-blue">
            <i class="fa fa-search"></i>查询
        </button>
        &nbsp;&nbsp;
        <button type="button" id="btn-add" onclick="SetChildInsurMsg('添加菜单', null)" class="btn bg-info">
            <i class="fa fa-plus-square"></i>添加
        </button>
    </form>
</div>
<!-- Main content -->
<section class="content">
    <div class="card flex-fill w-100">
        <div class="panel-body">
            <table id="dgvInfo" class="table table-bordered"
                   @*data-click-to-select="true" *@
                   data-tree-table="true"
                   data-id-field="gid"
                   data-parent-id-field="menu_ParentID"
                   data-expand-all="true"
                   data-column="1">
                <thead>
                    <tr>
                        <th data-checkbox=true></th>
                        <th data-field="gid" data-visible="false">id</th>
                        <th data-field="menu_ParentID" data-visible="false">父id</th>
                        <th data-field="menu_Name" data-cell-style="funcNmStyle" data-formatter="funcNmFormatter">菜单名称</th>
                        <th data-field="menu_Num">菜单编号</th>
                        <th data-field="menu_Url">菜单地址</th>
                        <th data-field="menu_IsShow" data-formatter="IsPermissionFormatter">是否显示</th>
                        <th data-field="userName">添加人</th>
                        <th data-field="createTime">时间</th>
                        <th data-field="" data-formatter="Operations" data-events="actionEvents">操作</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</section>




<!-- /.content -->
<script type="text/javascript">
    $(document).ready(function () {
        $("#dgvInfo").bootstrapTable({
            method: "GET",
            url: "@Url.Action("TreeJson")",
            contentType: "application/x-www-form-urlencoded",
            datatype: 'json',
            undefinedText: '',
            striped: false,//隔行 渐变色
            classes: "table table-hover",
            clickToSelect: true,  
            queryParams: function (params) {
                return {
                    menu_Name: $.trim($("#menu_Name").val()),
                    userName: $.trim($("#userName").val())
                }
            },
            onClickRow: function (row, dom, field) {
                $("#dgvInfo").bootstrapTable('uncheckAll');
                //$("#dgvInfo").bootstrapTable("checkBy", { field: "gid", values: [dom.data('index')] });
            }
        });

        //表格  - 操作 - 事件
        window.actionEvents = {
            'click #update-selected': function (e, value, row, index) {
                SetChildInsurMsg('修改菜单', row)
            },
            'click #delete-selected': function (e, value, row, index) {
                 $.ajax({
                    url: '@Url.Action("DeleteMeun")',
                    type: 'post',
                    dataType: 'json',
                    data: row,
                    success: function (data) {
                        console.log(data.message);
                        searchData();
                    },
                    error: function () {
                        layer.alert('发生错误', {
                            skin: 'layui-layer-molv',
                            closeBtn: 0
                        });
                    }
                });
            }
        };
    });

    function funcNmStyle(value, row, index) {
        return { css: { "white-space": "nowrap" } };
    }

    function funcNmFormatter(value, row) {
        return ' <i class="' + row.menu_Icon + '">' + value+'</i>';
        //<a href="@Url.Action("Update")?FunctionID=' + row.gid + '">' + value + '</a>
    }

    function Operations(value, row, index) {
       var str = '<button type="button" id="update-selected" class="btn btn-primary btn-sm"><i class="fa fa-edit"></i>修改</button>&nbsp;&nbsp;<button type="button" id="delete-selected" class="btn btn-danger btn-sm"><i class="fa  fa-trash-o"></i>删除</button>';
       return str;
    }

    function IsPermissionFormatter(value, row) {
        var str = '<input type=checkbox class = "disabled" ' + ((row.menu_IsShow==1) ? 'checked' : '') + ' disabled></input>';
        return str;
    }

    function searchData() {
        $("#dgvInfo").bootstrapTable('refresh', {
            url: '@Url.Action("TreeJson")'
        });
    }

    function SetChildInsurMsg(title, rows) {
        if (rows == null) {
            var selectrow = $("#dgvInfo").bootstrapTable('getSelections')[0];
            if (selectrow == null) {
                alert("选择父菜单");
                return;
            }
        }

        layer.open({
            type: 2, //因为layer弹出层需要一个页面，所以是iframe弹出层，因此type: 2。
            title: title,
            shadeClose: true,
            shade: 0.4,
            area: ['60%', '60%'],
            content: '@Url.Action("Info")',
            btn: ['确定', '关闭'],
            success: function (layero, index) {
                if (rows != null) {
                    var body = layer.getChildFrame('body', index);  //巧妙的地方在这里哦
                    body.contents().find("#gid").val(rows.gid);
                    body.contents().find("#menu_Num").val(rows.menu_Num);
                    body.contents().find("#menu_Name").val(rows.menu_Name);
                    body.contents().find("#menu_Url").val(rows.menu_Url);
                    body.contents().find("#menu_Icon").val(rows.menu_Icon);
                    body.contents().find("#menu_Iconi").addClass(rows.menu_Icon);
                    body.contents().find("#menu_IsShow").val(rows.menu_IsShow);
                    body.contents().find("#menu_ParentID").val(rows.menu_ParentID);
                    body.contents().find("#menu_ParentName").val(rows.menu_ParentName);
                    GetFunction(rows, body);
                }
                else {
                    var body = layer.getChildFrame('body', index);  //巧妙的地方在这里哦
                    body.contents().find("#menu_ParentID").val(selectrow.gid);
                    body.contents().find("#menu_ParentName").val(selectrow.menu_Name);
                }
            },
            yes: function (index) {
                var res = window["layui-layer-iframe" + index].callbackdata();
                var funs = window["layui-layer-iframe" + index].GetFunctions();
                var obj = JSON.parse(res);
                var functions = JSON.parse(funs);
                if (obj.menu_Name.length > 0) {
                    if (rows != null) {
                        updatemenu(obj, functions, index)
                    } else {
                        addmenu(obj, functions, index);
                    }
                }
                else {
                    layer.alert('请填写必输项。', {
                        skin: 'layui-layer-molv',
                        closeBtn: 0
                    });
                }
            },
            cancel: function () {
                //右上角关闭回调
            }
        });
    }

    //获取功能
    function GetFunction(row, body) {
        $.ajax({
            url: '@Url.Action("GetMenuFunction")',
            type: 'get',
            dataType: 'json',
            data: {
                mid: row.gid
            },
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    body.contents().find("input[value=" + data[i].menuFunction_FunctionID + "]").attr("checked", true)
                    //.iCheck('check');
                }
            },
            error: function () {
                alert("发生错误!");
            }
        });
    };

    function addmenu(data, functions, index) {
        $.ajax({
            url: '@Url.Action("AddMenu")',
            type: 'post',
            dataType: 'json',
            data: {
                model: data,
                functions: functions
            },
            success: function (data) {
                if (data.type == 1) {
                    layer.close(index);
                    searchData();
                } else {
                    alert(data.message);
                }
            },
            error: function () {
                alert("发生错误!");
            }
        });
    };

    function updatemenu(data, functions, index) {
        $.ajax({
            url: '@Url.Action("UpdateMenu")',
            type: 'post',
            dataType: 'json',
            data: {
                model: data,
                functions: functions
            },
            success: function (data) {
                if (data.type == 1) {
                    layer.close(index);
                    searchData();
                } else {
                    alert(data.message);
                }
            },
            error: function () {
                alert("发生错误!");
            }
        });
    };
        @*function deleteSelected() {
            var ids = [];
            $.map($("#dgvInfo").bootstrapTable('getSelections'), function (value, index) {
                ids.push(value.Id);
            });
            if (ids.length <= 0) {
                toastr["error"]("您没有选择任何项！");
                return;
            }

            dialogConfirm("您是否要删除所选项？", function (e) {
                if (e == true) {
                    $.ajax({
                        url: '@Url.Action("Delete")',
                        type: 'post',
                        dataType: 'html',
                        data: { functionID: ids },
                        success: function () {
                            window.location.href = '@Url.Action("Index")';
                        },
                        error: function () {
                            toastr["error"]("发生错误!");
                        }
                    });
                }
            });

        }*@
</script>

